# Checkbox, Radio, Switch и Favorite
Компоненты, реализующие переключатели.

## Installation
`npm i @snack-uikit/toggles`

[Changelog](../../../CHANGELOG.md)

## хук useToggleGroup
Хук для элементов внутри группы переключателей.

### Аргументы

#### **`value: string`**

Уникальное значение для элемента в группе

```tsx
  function ToggleCard(props: ToggleCardProps) {
    const { isChecked, handleClick, multipleSelection } = useToggleGroup(props.id);

    return (
      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
    );
  }
```

### Примеры:

#### ToggleGroup
```typescript jsx

  const [value, setValue] = useState<string | undefined>(undefined);

  function ToggleCard(props: ToggleCardProps) {
    const { isChecked, handleClick, multipleSelection } = useToggleGroup(id);

    return (
      <Card {...props} checked={isChecked} onClick={handleClick} multipleSelection={multipleSelection}/>
    );
  }

  // ITEMS -some array with ToggleCardProps
  
  // ...

  return (
    <ToggleGroup selectionMode='single' value={value} onChange={setValue}>
      {ITEMS.map(props => (
        <ToggleCard key={props.id} {...props} />
      ))}
    </ToggleGroup>
  );

// ...

return (
  <>
    {items.map(({ checked, setChecked, data }) =>
      <CustomRadioButton
        // повторяет нативное поведение радиогруппы: по клику можно выбрать, но нельзя снять выбор
        onClick={() => setChecked(true)}
        checked={checked}
        data={data}
      />
    )}
  </>
);
```


[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## Checkbox
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| id | `string` | - | HTML-аттрибут id |
| name | `string` | - | HTML-аттрибут name |
| value | `string` | - | HTML-аттрибут value |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| autofocus | `boolean` | - | HTML-аттрибут autofocus |
| checked | `boolean` | - | HTML-аттрибут checked |
| defaultChecked | `boolean` | - | HTML-аттрибут checked по-умолчанию |
| disabled | `boolean` | - | HTML-аттрибут disabled |
| onChange | `(checked: boolean) => void` | - | Колбек смены значения |
| onClick | `MouseEventHandler<HTMLInputElement>` | - | Колбек клика |
| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек потери фокуса |
| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек приобретения фокуса |
| className | `string` | - | CSS-класс |
| size | enum Size: `"s"`, `"m"` | m | Размер |
| inputRef | `RefObject<HTMLInputElement>` | - |  |
| indeterminate | `boolean` | - | Состояние частичного выбора |
| indeterminateDefault | `boolean` | - | Состояние частичного выбора по-умолчанию |
## Switch
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| id | `string` | - | HTML-аттрибут id |
| name | `string` | - | HTML-аттрибут name |
| value | `string` | - | HTML-аттрибут value |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| autofocus | `boolean` | - | HTML-аттрибут autofocus |
| checked | `boolean` | - | HTML-аттрибут checked |
| defaultChecked | `boolean` | - | HTML-аттрибут checked по-умолчанию |
| disabled | `boolean` | - | HTML-аттрибут disabled |
| onChange | `(checked: boolean) => void` | - | Колбек смены значения |
| onClick | `MouseEventHandler<HTMLInputElement>` | - | Колбек клика |
| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек потери фокуса |
| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек приобретения фокуса |
| className | `string` | - | CSS-класс |
| size | enum Size: `"s"`, `"m"` | m | Размер |
| inputRef | `RefObject<HTMLInputElement>` | - |  |
| showIcon | `boolean` | - | Показывать ли иконку в переключателе |
| loading | `boolean` | - |  |
## Radio
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| id | `string` | - | HTML-аттрибут id |
| name | `string` | - | HTML-аттрибут name |
| value | `string` | - | HTML-аттрибут value |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| autofocus | `boolean` | - | HTML-аттрибут autofocus |
| checked | `boolean` | - | HTML-аттрибут checked |
| defaultChecked | `boolean` | - | HTML-аттрибут checked по-умолчанию |
| disabled | `boolean` | - | HTML-аттрибут disabled |
| onChange | `(checked: boolean) => void` | - | Колбек смены значения |
| onClick | `MouseEventHandler<HTMLInputElement>` | - | Колбек клика |
| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек потери фокуса |
| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек приобретения фокуса |
| className | `string` | - | CSS-класс |
| size | enum Size: `"s"`, `"m"` | - | Размер |
| inputRef | `RefObject<HTMLInputElement>` | - |  |
## Favorite
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| id | `string` | - | HTML-аттрибут id |
| name | `string` | - | HTML-аттрибут name |
| value | `string` | - | HTML-аттрибут value |
| tabIndex | `number` | - | HTML-аттрибут tab-index |
| autofocus | `boolean` | - | HTML-аттрибут autofocus |
| checked | `boolean` | - | HTML-аттрибут checked |
| defaultChecked | `boolean` | - | HTML-аттрибут checked по-умолчанию |
| disabled | `boolean` | - | HTML-аттрибут disabled |
| onChange | `(checked: boolean) => void` | - | Колбек смены значения |
| onClick | `MouseEventHandler<HTMLInputElement>` | - | Колбек клика |
| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек потери фокуса |
| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек приобретения фокуса |
| className | `string` | - | CSS-класс |
| size | enum Size: `"s"`, `"m"` | m | Размер |
| inputRef | `RefObject<HTMLInputElement>` | - |  |
| icon | enum FavoriteIcon: `"star"`, `"heart"` | heart | Иконка |
## ToggleGroup
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| defaultValue | `string \| string[]` | - | Начальное состояние |
| value | `string \| string[]` | - | Controlled состояние |
| onChange | `((value: string) => void) \| ((value: string[]) => void)` | - | Controlled обработчик измения состояния |
| selectionMode | "single" \| "multiple" | single | Режим выбора |
## useToggleGroup
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| value* | `string` | - |  |


[//]: DOCUMENTATION_SECTION_END
